import './style/index.less';
import webglUtils from './ThirdParty/webgl-utils';
import * as dat from 'dat.gui';

import VS from './Shaders/demo4VS.glsl';
import FS from './Shaders/demo4FS.glsl';

function render() {
    const canvas = document.getElementById("canvas");
    const gl = canvas.getContext('webgl2');
    if (!gl) {
        console.log('webgl2 not supported');
    }

    const program = webglUtils.createProgramFromSources(gl, [VS, FS]);

    //attribute和uniform的位置
    const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    
    //attribute的状态
    const vao = gl.createVertexArray();
    //关联当前使用这个vao
    gl.bindVertexArray(vao);

    //创建position数据的buffer
    const positionBuffer = gl.createBuffer();
    //启用position attribute
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    //告诉attribute如何从positionBuffer读取数据
    const size1 = 2;
    const type1 = gl.FLOAT;
    const normalize1 = false;
    const stride1 = 0;
    const offset1 = 0;
    gl.vertexAttribPointer(positionAttributeLocation, size1, type1, normalize1, stride1, offset1);

    //激活position buffer，在setRectangle中用
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    //设置画框（两个三角形）的position
    setRectangle(gl, 0, 0, 100, 50);

    //调整分辨率与canvas大小相等
    webglUtils.resizeCanvasToDisplaySize(gl.canvas);
    //调整webgl画布大小与canvas大小相等
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    //使用创建的以上的program
    gl.useProgram(program);

    function redraw(){
        //调整webgl画布大小与canvas大小相等
        // gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
        // gl.clearColor(0, 0, 0, 0);
        gl.clear(gl.COLOR_BUFFER_BIT);
    
        //修改平移量
        gl.uniform2f(translateUniformLocation, trans.x, trans.y);        
        //修改缩放量
        gl.uniform2f(scaleUniformLocation, scale.x, scale.y);
    
        //绘制方形画布
        const primitiveType = gl.TRIANGLES;
        const offset3 = 0;
        const count = 6;
        gl.drawArrays(primitiveType, offset3, count);
    }

    /**
     * 设置UI和事件
     */
    const gui = new dat.GUI();
    const trans = {
        x:0,
        y:0
    };
    const scale = {
        x:1,
        y:1,
    };
    const x = gui.add(trans, 'x', 0, 100);
    const y = gui.add(trans, 'y', 0, 100);
    const sx = gui.add(scale, 'x', 0.1, 2);
    const sy = gui.add(scale, 'y', 0.1, 2);
    x.onChange((value)=>{
        trans.x = value;
        redraw();
    });
    y.onChange((value)=>{
        trans.y = value;
        redraw();
    });

    sx.onChange((value)=>{
        scale.x = value;
        redraw();
    });
    sy.onChange((value)=>{
        scale.y = value;
        redraw();
    });

    //声明uniform
    const resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
    const colorUniformLocation = gl.getUniformLocation(program, "u_color");
    const translateUniformLocation = gl.getUniformLocation(program, "u_translate");
    const scaleUniformLocation = gl.getUniformLocation(program, "u_scale");
    //传入uniform
    gl.uniform2f(translateUniformLocation, 0, 0);
    gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
    gl.uniform4f(colorUniformLocation, 1, 0, 0, 1);
    gl.uniform2f(scaleUniformLocation, 1, 1);

    //绘制方形画布
    const primitiveType = gl.TRIANGLES;
    const offset3 = 0;
    const count = 6;
    gl.drawArrays(primitiveType, offset3, count);
}



function setRectangle(gl, x, y, width, height) {
    var x1 = x;
    var x2 = x + width;
    var y1 = y;
    var y2 = y + height;
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
        x1, y1,
        x2, y1,
        x1, y2,
        x1, y2,
        x2, y1,
        x2, y2,
    ]), gl.STATIC_DRAW);
}

render();